kids/level/[slug]/page.tsx - 儿童关卡页

kids/level/[slug]/page.tsx - 儿童关卡页

基本信息

属性值
路径src/app/kids/level/[slug]/page.tsx
类型Next.js 动态路由页面 (Server Component)
功能儿童模式的单个学习关卡

功能描述

渲染儿童学习模式的具体关卡内容。根据关卡 slug 加载对应的 MDX 内容，支持多语言回退。页面使用静态生成提升性能。

导入依赖

import { notFound } from "next/navigation";
import { getLocale } from "next-intl/server";
import { getLevelBySlug, getAllLevels } from "@/lib/kids/levels";
import { LevelContentWrapper } from "@/components/kids/layout/level-content-wrapper";
import type { Metadata } from "next";

Props 接口

interface LevelPageProps {
  params: Promise<{ slug: string }>;
}

静态参数生成

generateStaticParams()

在构建时预生成所有关卡页面。

export async function generateStaticParams() {
  return getAllLevels().map((level) => ({
    slug: level.slug,
  }));
}

元数据生成

generateMetadata({ params })

{
  title: `${level.title} | Learn Prompting for Kids`,
  description: level.description
}

错误处理: 关卡不存在时返回 { title: "Level Not Found" }

关卡数据结构

interface Level {
  slug: string;
  title: string;
  description: string;
  world: number;        // 所属世界编号
  levelNumber: number;  // 关卡编号
  order: number;
}

多语言内容加载

加载策略

let Content;
try {
  // 1. 尝试加载当前语言版本
  Content = (await import(`@/content/kids/${locale}/${slug}.mdx`)).default;
} catch {
  try {
    // 2. 回退到英文版本
    Content = (await import(`@/content/kids/en/${slug}.mdx`)).default;
  } catch {
    // 3. 内容不存在
    Content = null;
  }
}

内容目录结构

src/content/kids/
├── en/
│   ├── 1-1-what-is-a-prompt.mdx
│   ├── 1-2-talking-to-ai.mdx
│   └── ...
├── zh/
│   ├── 1-1-what-is-a-prompt.mdx
│   └── ...
└── ... (other locales)

UI 结构

LevelContentWrapper
└── MDX Content (if exists)

LevelContentWrapper Props

属性类型说明
levelSlugstring关卡标识
levelNumberstring显示格式: "{world}-{levelNumber}"
childrenReactNodeMDX 内容

关卡编号格式

const levelNumber = `${level.world}-${level.levelNumber}`;
// 示例: "1-1", "2-3"

组件引用

组件来源类型功能
LevelContentWrapper@/components/kids/layout/level-content-wrapperClient Component关卡内容容器（导航、进度、交互）

工具函数

函数来源用途
getLevelBySlug@/lib/kids/levels获取关卡信息
getAllLevels@/lib/kids/levels获取所有关卡（静态生成）

路由

路径说明
/kids儿童首页
/kids/map学习地图
/kids/level/{slug}具体关卡（当前）

错误处理

关卡不存在

if (!level) {
  notFound();
}

触发 Next.js 的 404 页面。

内容不存在

{Content ? <Content /> : null}

优雅处理缺失的内容，不中断用户体验。

页面流程

1. 访问 /kids/level/1-1-what-is-a-prompt
2. 获取关卡信息 (getLevelBySlug)
3. 关卡不存在? → 404
4. 加载 MDX 内容（优先当前语言，回退英文）
5. 渲染 LevelContentWrapper + Content

相关文件

  • src/app/kids/layout.tsx - 儿童模式布局
  • src/app/kids/map/page.tsx - 学习地图
  • src/lib/kids/levels.ts - 关卡数据管理
  • src/components/kids/layout/level-content-wrapper.tsx - 内容包装器

LevelContentWrapper 推测功能

基于命名和上下文：

  • 🎯 关卡标题和进度显示
  • 📖 课程内容渲染
  • ✅ 完成检查点
  • 🎮 互动练习区域
  • 🔘 下一关/返回地图导航
  • 💾 进度自动保存
← 返回目录